<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Login-ProjectManagment</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" th:href="@{/assets/img/icon.ico}" type="image/x-icon"/>
    <div th:replace="commom/bar :: commom_css"></div>
</head>
<body class="login">
<div class="wrapper wrapper-login">
    <div class="container container-login animated fadeIn">
        <h3 class="text-center">登录</h3>
        <div class="login-form">
            <form th:action="@{/login_user}" method="post">
                <div class="form-group form-floating-label">
                    <input id="email" name="email" type="email" class="form-control input-border-bottom"
                           autocomplete="off" required>
                    <label for="email" class="placeholder">邮箱</label>
                </div>
                <div class="form-group form-floating-label">
                    <input id="password" name="password" type="password" class="form-control input-border-bottom"
                           autocomplete="off" required>
                    <label for="password" class="placeholder">密码</label>
                    <div class="show-password">
                        <i class="flaticon-interface"></i>
                    </div>
                </div>
                <div class="form-group form-floating-label row">
                    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="captchaCode" id="captchaCode"
                                                   class="form-control input-border-bottom col-lg-7" autocomplete="off"
                                                   required>
                    <label for="captchaCode" class="placeholder">&nbsp;&nbsp;&nbsp;&nbsp;验证码</label>
                    <img th:src="@{/kaptcha}" id="kaptcha" width="110px" height="40px" class="col-lg-4"><br>
                </div>
                <div class="row form-sub m-0">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="rememberme" name="remember-me">
                        <label class="custom-control-label" for="rememberme">记住我</label>
                    </div>

                    <a th:href="@{/forgetpassword}" class="link float-right">忘记密码?</a>
                </div>
                <div class="form-action mb-3">
                    <button class="btn btn-info btn-rounded btn-login" type="button" onclick="login()">
							<span class="btn-label">
								<i class="fas far fa-paper-plane"></i>
							</span>
                        &nbsp;登&nbsp;&nbsp;录
                    </button>
                </div>
            </form>
            <div class="login-account">
                <span class="msg">没有账户?</span>
                <a href="#" id="show-signup" class="link">注册</a>
            </div>
        </div>
    </div>

    <div class="container container-signup animated fadeIn">
        <h3 class="text-center">注册</h3>
        <div class="login-form">
            <form th:action="@{/user}" method="post" onSubmit="return registerCheck();">
                <div class="form-group form-floating-label">
                    <input id="registerUsername" name="username" type="text" class="form-control input-border-bottom"
                           autocomplete="off" required>
                    <label for="registerUsername" class="placeholder">用户名</label>
                </div>
                <div class="form-group form-floating-label">
                    <input id="registerEmail" name="email" type="email" class="form-control input-border-bottom"
                           autocomplete="off" required>
                    <label for="registerEmail" class="placeholder">邮箱</label>
                </div>
                <div class="form-group form-floating-label">
                    <input id="registerPhone" name="phone" type="text" class="form-control input-border-bottom"
                           autocomplete="off" required>
                    <label for="registerPhone" class="placeholder">手机</label>
                </div>
                <div class="form-group form-floating-label">
                    <input id="passwordsignin" name="password" type="password" class="form-control input-border-bottom"
                           required>
                    <label for="passwordsignin" class="placeholder">密码</label>
                    <div class="show-password">
                        <i class="flaticon-interface"></i>
                    </div>
                </div>
                <div class="form-group form-floating-label">
                    <input id="confirmpassword" name="confirmpassword" type="password"
                           class="form-control input-border-bottom" required>
                    <label for="confirmpassword" class="placeholder">确认密码</label>
                    <div class="show-password">
                        <i class="flaticon-interface"></i>
                    </div>
                </div>
                <div class="row form-sub m-0">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" name="agree" id="agree">
                        <label class="custom-control-label" for="agree">我同意条款</label>
                    </div>
                </div>
                <div class="form-action">
                    <a href="#" id="show-signin" class="btn btn-danger btn-rounded btn-login mr-3">
							<span class="btn-label">
								<i class="fas far fa-reply"></i>
							</span>
                    </a>
                    <button class="btn btn-primary btn-rounded btn-login">
							<span class="btn-label">
								<i class="fas far fa-check"></i>
							</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--   Core JS Files   -->
<script th:src="@{/assets/js/core/jquery.3.2.1.min.js}"></script>
<script th:src="@{/assets/js/core/popper.min.js}"></script>
<script th:src="@{/assets/js/core/bootstrap.min.js}"></script>
<!-- jQuery UI -->
<script th:src="@{/assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
<script th:src="@{/assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js}"></script>
<!-- Sweet Alert -->
<script th:src="@{/assets/js/plugin/sweetalert/sweetalert.min.js}"></script>
<!-- Bootstrap Toggle -->
<script th:src="@{/assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js}"></script>
<!-- jQuery Scrollbar -->
<script th:src="@{/assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js}"></script>
<!-- Datatables -->
<script th:src="@{/assets/js/plugin/datatables/datatables.min.js}"></script>
<!-- Azzara JS -->
<script th:src="@{/assets/js/ready.min.js}"></script>
<!-- Azzara DEMO methods, don't include it in your project! -->
<script th:src="@{/assets/js/setting-demo.js}"></script>
<script type="text/javascript">
    $(function () {
        var kaptchaImg = document.getElementById("kaptcha");
        kaptchaImg.onclick = function (ev1) {
            kaptchaImg.src = "/kaptcha?" + Math.floor(Math.random() * 100);
        }
    })

    //登录按钮事件
    function login() {
        var email = $("#email").val();
        var password = $("#password").val();
        var captchaCode = $("#captchaCode").val();
        var rememberME = $("#rememberme").is(":checked");
        if (email === "" || password === "") {
            return;
        }
        $.ajax({
            type: "POST",
            url: "/login_user",
            data: {
                "email": email,
                "password": password,
                "captchaCode": captchaCode,
                "remember-me": rememberME
            },
            success: function (data) {
                if (data.ok) {
                    swal(data.message, {
                        icon: "success",
                        buttons: false,
                        timer: 1500,
                    });
                    setTimeout(function () {
                        location.href = data.data;
                    }, 1500);
                } else {
                    swal("登录失败！", data.message, {
                        icon: "error",
                        buttons: {
                            confirm: {
                                className: 'btn btn-danger'
                            }
                        },
                    });
                }
            },
        })
    };

    $(function () {
        //异步检查邮箱是否注册
        $("#registerEmail").keyup(function () {
            setTimeout('checkemail()', 1500);
        })
        //异步检查密码是否一致
        $("#confirmpassword").keyup(function () {
            checkpassword();
        })
    })
    var emailFlag = false;

    //检查邮箱
    function checkemail() {
        var email = $("#registerEmail").val();
        var registerEmail = $("#registerEmail");
        $.ajax({
            type: "GET",
            url: "/user",
            data: {
                "email": email
            },
            success: function (json) {
                if (!json) {
                    registerEmail.css('borderColor', 'red');
                    emailFlag = false;
                } else {
                    registerEmail.css('borderColor', '');
                    emailFlag = true;
                }
            },
        })
    }

    //检查密码
    function checkpassword() {
        var password1 = $("#passwordsignin").val();
        var password2 = $("#confirmpassword").val();
        var confirmpassword = $("#confirmpassword");
        if (password1 != password2) {
            confirmpassword.css('borderColor', 'red');
            return false;
        } else {
            confirmpassword.css('borderColor', '');
            return true;
        }
    }

    //检查注册页面是否填写完成
    function registerCheck() {
        if ($("#registerUsername").val() == "") {
            return false;
        }
        if (!emailFlag) {
            return false;
        }
        if ($("#registerPhone").val() == "") {
            return false;
        }
        if (!checkpassword()) {
            return false;
        }
        if (!$("#agree").is(":checked")) {
            return false;
        }
    }
</script>
</body>
</html>